<template>
  <div class="bpmn-de">
    <!-- <el-button @click="save">保存</el-button> -->
    <fc-designer ref="designer">
      <template #handle>
        <el-button round size="small" type="primary" @click="handleSave" icon="Edit" plain>
          保存
        </el-button>
      </template>
    </fc-designer>
  </div>
</template>

<script setup name="formDesigner">
import { ref, onMounted } from 'vue'; // Import necessary functions from Vue 3
import { getBpmForm, updateBpmForm } from "@/api/flowable/bpmForm";
const { proxy } = getCurrentInstance();
import formCreate from '@form-create/element-ui'
import FcDesigner from '@form-create/designer'

import { useRoute, useRouter } from 'vue-router'

const route = useRoute();
const router = useRouter();


const formDetail = ref({});
const designer = ref({});

onMounted(() => {
  getBpmForm(route.query.id).then(res => {
    formDetail.value = res.data;
    if (formDetail.value.formOption && formDetail.value.formFields) {
        designer.value.setOption(JSON.parse(formDetail.value.formOption));
        designer.value.setRule(formCreate.parseJson(formDetail.value.formFields));
    }
  });
});

const handleSave = () => {
  formDetail.value.formOption = JSON.stringify(designer.value.getOption())
  formDetail.value.formFields = formCreate.toJson(designer.value.getRule())
  updateBpmForm(formDetail.value).then((res)=>{
    proxy.$modal.msgSuccess("修改成功");
    // this.$store.dispatch("tagsView/delView", this.$route);
    router.push({
      path:'/bpm/bpmForm',
    })
  })
};
</script>

<style scoped>
.bpmn-de {
  width: calc(100vw - 200px);
  height: calc(100vh - 84px);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
</style>
